<template>
  <div class="container">
    <div class="card-panel">
      <div v-if="total===0">No Data</div>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :lg="6" v-for="(item, index) in list" :key="index">
          <div class="card-panel-list">
            <div class="card-panel-top">
              <div class="card-panel-title">
                灌溉信息
              </div>
              <el-divider />
              <el-descriptions :column="1" :label-style="{'color': '#999999' }" >
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/equipment.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备名称
                  </template>
                  {{item.name}}
<!--                  <dict-tag :type="DICT_TYPE.EQUIPMENT_ACQUISITION_INFO_STATION_ID" :value="item.equipmentId" />-->
                </el-descriptions-item>
                <el-descriptions-item >
                  <template slot="label">
                    <img src="@/assets/images/id.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备ID
                  </template>{{item.serialNum}}
                </el-descriptions-item>
                <el-descriptions-item contentStyle="color:#1BBC8B" :span="2">
                  <template slot="label">
                    <img src="@/assets/images/computer.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备状态
                  </template>{{item.online === 0 ? "离线" : '在线'  }}
                </el-descriptions-item>
                <el-descriptions-item contentStyle="color:#1BBC8B" :span="2">
                  <template slot="label">
                    <img src="@/assets/images/computer.png" alt="" style="padding-right: 5px; margin:auto 0">
                    阀位值
                  </template>{{item.valveValue ? item.valveValue : 0 }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/time.png" alt="" style="padding-right: 5px;  margin:auto 0">
                    最新上报时间
                  </template>{{parseTime(item.createTime)}}
                </el-descriptions-item>
                <el-descriptions-item >
                  <template slot="label">
                    <img src="@/assets/images/address.png" alt="" style="padding-right: 5px; margin:auto 0">
                    地址
                  </template>安徽省合肥市庐江县同大镇
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="card-panel-bottom" @click="handleDetail(item)">
              <el-button size="mini" type="text">设备控制</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <pagination v-if="total> 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList" class="pagination" :layout="'total, prev, pager, next, jumper'" />
    </div>
  </div>
</template>

<script>

import {getAcquisitionInfoPageTemp} from "@/api/equipment/waterPump";

export default {
  data () {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 3,
      // 设备采集信息列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 8
      },
      // 表单参数
      form: {},
      // 表单校验
    };
  },
  created () {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList () {
      this.loading = true;
      // 执行查询
      getAcquisitionInfoPageTemp(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    handleDetail (item) {
      const id = item.id;
      const valveValue = item.valveValue ? item.valveValue : 0;
      this.$router.push({
        path: "/irrigation/data/details",
        query: { id: id , valveValue: valveValue, name: item.name },
      });
    }
  }

}
</script>

<style lang="scss" scoped>
.no-data {
  font-size: 28px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container {
  padding: 24px;
  background-color: rgb(240, 242, 245);

  .card-panel {
    min-height: 1155px;

    .card-panel-list {
      margin: 15px 0;
      height: 370px;
      background: #fff;
      box-shadow: 0 3px 6px 1px rgba(67, 98, 255, 0.2);
      border-radius: 10px;
      position: relative;

      .card-panel-top {
        padding: 20px;

        .card-panel-title {
          border-left: 5px solid #4362ff;
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
        }
        ::v-deep .el-descriptions-item__cell:nth-child(2){
          float: right;
        }
      }
      .card-panel-bottom {
        padding: 20px 30px;
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #f5f8ff;
        border-radius: 0 0 10px 10px;
        .el-button--text {
          color: #4362ff;
          font-size: 16px;
        }
      }

    }

    .pagination {
      margin: 30px auto;
      width: 500px;
      background: rgb(240, 242, 245);
    }
  }
}
</style>
